import React, { Component } from 'react';
import { Card, Button, Input, Space, Alert } from 'antd';

interface Props {
    title: string;
}

interface State {
    count: number;
    inputValue: string;
    error: string | null;
}

class LifecycleDemo extends Component<Props, State> {
    private timer: NodeJS.Timeout | null = null;

    constructor(props: Props) {
        super(props);
        this.state = {
            count: 0,
            inputValue: '',
            error: null
        };
        console.log('1. Constructor: 组件被创建');
    }

    componentDidMount() {
        console.log('3. ComponentDidMount: 组件已挂载到DOM');
        // 演示定时器设置
        this.timer = setInterval(() => {
            this.setState(prevState => ({
                count: prevState.count + 1
            }));
        }, 1000);
    }

    shouldComponentUpdate(nextProps: Props, nextState: State) {
        console.log('4. ShouldComponentUpdate: 是否应该更新组件？');
        // 只有当count是偶数时才更新组件
        if (this.state.count !== nextState.count) {
            return nextState.count % 2 === 0;
        }
        return true;
    }

    componentDidUpdate(prevProps: Props, prevState: State) {
        console.log('5. ComponentDidUpdate: 组件已更新');
        // 演示条件判断避免无限循环
        if (prevState.inputValue !== this.state.inputValue) {
            if (this.state.inputValue.length > 10) {
                this.setState({ error: '输入内容过长！' });
            } else {
                this.setState({ error: null });
            }
        }
    }

    componentWillUnmount() {
        console.log('6. ComponentWillUnmount: 组件即将卸载');
        // 清理定时器
        if (this.timer) {
            clearInterval(this.timer);
        }
    }

    handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({ inputValue: e.target.value });
    };

    render() {
        console.log('2. Render: 渲染组件');
        const { count, inputValue, error } = this.state;
        const { title } = this.props;

        return (
            <Card title={title} style={{ marginBottom: 16 }}>
                <Space direction="vertical" style={{ width: '100%' }}>
                    <div>
                        计数器: {count}
                        <Button 
                            onClick={() => this.setState({ count: count + 1 })}
                            style={{ marginLeft: 8 }}
                        >
                            增加
                        </Button>
                    </div>

                    <div>
                        <Input
                            value={inputValue}
                            onChange={this.handleInputChange}
                            placeholder="输入些内容试试"
                        />
                        {error && <Alert type="error" message={error} style={{ marginTop: 8 }} />}
                    </div>

                    <div>
                        <h4>说明：</h4>
                        <ol>
                            <li>计数器每秒自动+1，但只在偶数时更新显示</li>
                            <li>输入框超过10个字符会显示错误提示</li>
                            <li>请打开控制台查看生命周期函数的执行顺序</li>
                        </ol>
                    </div>
                </Space>
            </Card>
        );
    }
}

export default LifecycleDemo; 